<template>
  <div id="app" style="background-color: #f7f7f7">
    <van-tabs v-model="activeName" color="#1faf88">
      <!-- <van-tab title="单期杂志" name="single" title-inactive-color="#1faf88">
        <van-tree-select
          height="55vw"
          :items="items"
          :main-active-index.sync="active"
        >
          <template #content>
            <van-image
              v-if="active === 0"
              src="https://img01.yzcdn.cn/vant/apple-1.jpg"
            />
            <van-image
              v-if="active === 1"
              src="https://img01.yzcdn.cn/vant/apple-2.jpg"
            />
          </template>
        </van-tree-select>
      </van-tab> -->
      <van-tab title="杂志合集" name="collection">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell v-for="item in list" :key="item" style="margin: 0 0 10px 0">
            <van-row class="magezing-item">
              <van-col span="5" style="padding: 0 14px">
                <img
                  class="cover"
                  lazy="loaded"
                  width="89"
                  height="124"
                  src="/magezinelist_img/1.jpg"
                  alt=""
                />
              </van-col>
              <van-col span="17" style="padding: 0 60px; flex: 1 1 0%">
                <div class="content">
                  <div>
                    <h5>2020全年杂志</h5>
                    <p
                      style="
                        color: #999;
                        line-height: 20px;
                        margin-bottom: 12px;
                        font-size: 12px;
                      "
                    >
                      共24期杂志
                    </p>
                  </div>
                  <div>
                    <van-button
                      style="width: 70px"
                      color="#f07d33"
                      round
                      size="small"
                      >￥72元</van-button
                    >
                  </div>
                </div>
              </van-col>
              <van-col span="1" class="icon-content">
                <van-icon name="arrow" color="#1989fa" />
              </van-col>
            </van-row>
          </van-cell>
        </van-list>
        <back-home />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import BackHome from '../components/BackHome.vue'
export default {
  components: { BackHome },
  data() {
    return {
      activeName: 'single',
      active: 0,
      items: [{ text: '2022' }, { text: '2021' }],
      list: [],
      loading: false,
      finished: false,
    }
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1)
        }
        // 加载状态结束
        this.loading = false
        // 数据全部加载完成
        if (this.list.length >= 1) {
          this.finished = true
        }
      }, 500)
    },
  },
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  // padding: 0;
}
#app {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,
    Segoe UI, Arial, Roboto, 'PingFang SC', miui, 'Hiragino Sans GB',
    'Microsoft Yahei', sans-serif;
}
.magezine-item {
  margin-bottom: 8px;
  background-color: #fff;
}
.cover {
  border: 1px solid #ebebeb;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%);
}
.content {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 124px;
}
.content h5 {
  font-size: 16px;
  color: #333;
  line-height: 26px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
  font-weight: bold;
}
.icon-content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 124px;
}
</style>
